.notice-root {
  :global {
    .ant-menu-light, .ant-menu-light > .ant-menu {
      background-color: transparent;
    }

    .ant-drawer-body {
      padding: 0 !important;
    }
  }
}

.notice {
  display: flex;
  height: 100%;

  &-left {
    width: 240px;
    height: 100%;
    padding: 24px 16px;
    background-color: #fafbfc;
  }

  &-content {
    display: flex;
    min-width: 0;
    flex-grow: 1;
    flex-direction: column;

    &-header {
      padding: 16px;
      margin-bottom: 16px;
      border-bottom: var(--ant-line-width) var(--ant-line-type) var(--ant-color-border);
      flex-shrink: 0;
    }
  }
}

.notice-list {
  padding: 0 40px 20px 0;
  overflow-y: auto;
  flex-grow: 1;
}

.steps {
  padding-left: 120px !important;

  :global {
    .ant-steps-item {
      cursor: pointer;
    }
  }
}

.description {
  position: absolute;
  top: 0;
  left: -120px;
  width: 120px;
  padding: 0 10px;
  text-align: right;
  text-align: center;
}

.date {
  height: 24px;
  font-size: var(--ant-font-size);
  line-height: 24px;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: var(--ant-color-primary);
  border-radius: 12px;
}

.time {
  font-size: var(--ant-font-size-sm);
  line-height: var(--ant-steps-icon-size);
  color: var(--ant-text-color-secondary);
}

.no-more,
.loading {
  text-align: center;
}

.step {
  &.read {
    :global {
      .ant-steps-item-title {
        color: var(--ant-color-text-description) !important;
      }
    }
  }
}

.notice-detail {
  img {
    max-width: 100%;
  }
}
